<template>
  <div class="slot-machine">
    <div class="column" v-for="(target, index) in targetNumbers" :key="index">
      <div
        class="numbers"
        :style="{
          transform: `translateY(-${animationProgress[index]}%)`,
          transition: `transform ${animationDuration[index]}s ease-out`,
        }"
      >
        <!-- 循环显示从0到9的数字，额外添加一组数字以形成滚动效果 -->
        <div v-for="i in 30" :key="i" class="number">{{ i % 10 }}</div>
      </div>
    </div>
    <button @click="startRolling">开始滚动</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  targetNumbers: {
    type: Array,
    default: () => [0, 0, 0, 0, 0], // 目标数字数组，例如：[7, 2, 5, 9, 1]
  },
  duration: {
    type: Number,
    default: 2, // 动画总持续时间，单位为秒
  },
});

const animationProgress = ref(props.targetNumbers.map(() => 0)); // 滚动的百分比
const animationDuration = ref(props.targetNumbers.map(() => props.duration)); // 每列的动画持续时间

function startRolling() {
  props.targetNumbers.forEach((target, index) => {
    // 设置动画持续时间和滚动百分比，使滚动效果逐渐减速
    animationDuration.value[index] = props.duration + Math.random() * 2; // 随机增加一点持续时间，形成差异
    animationProgress.value[index] = (20 + target) * 100; // 滚动一定次数，最后停在目标数字位置
  });
}
</script>

<style scoped>
.slot-machine {
  display: flex;
  gap: 10px;
}

.column {
  width: 50px;
  height: 100px;
  overflow: hidden;
  border: 1px solid #333;
  border-radius: 5px;
  position: relative;
}

.numbers {
  display: flex;
  flex-direction: column;
}

.number {
  font-size: 2rem;
  text-align: center;
  height: 100px;
  line-height: 100px;
}
</style>
